/**
 * Created by fanweihua on 2016/12/2.
 */
import React from 'react';
import BadgeHtml from './badgeHmtl.js';

const Badge = React.createClass({
    getInitialState: function () {
        return {
            html: BadgeHtml.html
        }
    },
    render(){
        return (
            <div className="Z_slideIn">
                <div className="page slideIn">
                    <div className="Z_content_code">
                        <div dangerouslySetInnerHTML={{__html: this.state.html}}></div>
                    </div>
                </div>
                <div className="Z_content">
                    <div className="Z_panel-body-backgound">
                        <BadgeNav></BadgeNav>
                    </div>
                </div>
            </div>
        );
    }
});

const BadgeNav = React.createClass({
    render(){
        return (
            <div className="Z_panel-body">
                <div className="page__hd">
                    <h1 className="page__title">Badge</h1>
                    <p className="page__desc">徽章</p>
                </div>
                <div className="page__bd">
                    <div className="weui-cells__title">新消息提示跟摘要信息后，统一在列表右侧</div>
                    <div className="weui-cells">
                        <div className="weui-cell weui-cell_access">
                            <div className="weui-cell__bd">单行列表</div>
                            <div className="weui-cell__ft" style={{fontSize: 0}}>
                                <span style={{verticalAlign: "middle", fontSize: "17px"}}>详细信息</span>
                                <span className="weui-badge weui-badge_dot"
                                      style={{marginLeft: "5px", marginRight: "5px"}}></span>
                            </div>
                        </div>
                    </div>

                    <div className="weui-cells__title">未读数红点跟在主题信息后，统一在列表左侧</div>
                    <div className="weui-cells">
                        <div className="weui-cell">
                            <div className="weui-cell__hd" style={{position: "relative", marginRight: "10px"}}>
                                <img src="/bower_components/weui-master/example/images/pic_160.png"
                                     style={{width: "50px", display: "block"}}></img>
                                <span className="weui-badge"
                                      style={{position: "absolute", top: "-.4em", right: " -.4em"}}>8</span>
                            </div>
                            <div className="weui-cell__bd">
                                <p>联系人名称</p>
                                <p style={{fontSize: "13px", color: "#888888"}}>摘要信息</p>
                            </div>
                        </div>
                        <div className="weui-cell weui-cell_access">
                            <div className="weui-cell__bd">
                                <span style={{verticalAlign: "middle"}}>单行列表</span>
                                <span className="weui-badge" style={{marginLeft: "5px"}}>8</span>
                            </div>
                            <div className="weui-cell__ft"></div>
                        </div>
                        <div className="weui-cell weui-cell_access">
                            <div className="weui-cell__bd">
                                <span style={{verticalAlign: "middle"}}>单行列表</span>
                                <span className="weui-badge" style={{marginLeft: "5px"}}>8</span>
                            </div>
                            <div className="weui-cell__ft">详细信息</div>
                        </div>
                        <div className="weui-cell weui-cell_access">
                            <div className="weui-cell__bd">
                                <span style={{verticalAlign: "middle"}}>单行列表</span>
                                <span className="weui-badge" style={{marginLeft: "5px"}}>New</span>
                            </div>
                            <div className="weui-cell__ft"></div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
});
module.exports = Badge;